<template>
  <div class="budget-table">
    <div class="chart1" ref="ref1">

    </div>
    <div class="chart2" ref="ref2">

    </div>
  </div>
</template>

<script setup lang="js">
import axios from "axios"
import * as echarts from 'echarts';
import {onMounted, ref, onBeforeUnmount} from "vue"
const list = ref([])
const ref1 = ref()
const ref2 = ref()
let chart2 = null

const getOption = (data) => {
  let area = data.map(item => item.area);
  let num1 = data.map(item => item.number1);
  let option = {
    legend: {
      data: ['代储'],
      textStyle: {
        fontSize: 30,
        color: '#fff'
      }
    },
    tooltip: {
      trigger: "axis",
      textStyle: {
        fontSize: 30,
      }
    },
    xAxis: {
      type: "category",
      axisLabel: {
        fontSize: 30,
        color: 'rgba(255,255,255,.5)'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.4)'
        }
      },
      data: area, // 长数据
    },
    yAxis: {
      type: "value",
      axisLabel: {
        fontSize: 30,
        color: 'rgba(255,255,255,.5)'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
    },
    series: [
      {
        name: '代储',
        type: "bar",
        data: num1
      }
    ],
    grid: {
      left: "3%",
      right: "3%",
      bottom: "10%",
      containLabel: true,
      width: 1200, // 设定 grid 宽度，超出容器宽度
    },
    dataZoom: [
      {
        type: "slider", // 滚动条
        show: true,
        xAxisIndex: 0,
        start: 0,
        end: 50,
        textStyle: {
          fontSize:30
        }
      },
      {
        type: "inside", // 支持鼠标滚动缩放
        xAxisIndex: 0,
        start: 0,
        end: 50,
      },
    ],
  };
  return option
}

const props = defineProps({

})

const draw1 = (data) => {
  var chartDom = ref1.value
  var myChart = echarts.init(chartDom);
  var option = getOption(data);
  myChart.setOption(option);
  myChart.on('click', function (param) {
    getData2(param.name)
  });
}

const getOption2 = (data, name = '') => {
  const option = {
    tooltip: {
      trigger: "axis",
      textStyle: {
        fontSize: 30,
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.types),
      axisLabel: {
        fontSize: 30,
        color: 'rgba(255,255,255,.5)'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.4)'
        }
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 30,
        color: 'rgba(255,255,255,.5)'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
    },
    series: [
      {
        data: data.map(item => item.number1),
        type: 'bar',
        barWidth: 40,
        name
      }
    ],
    grid: {
      left: "3%",
      right: "3%",
      bottom: "8%",
      containLabel: true,
      width: 700, // 设定 grid 宽度，超出容器宽度
    },
  };
  return option;
}

const draw2 = () => {
  var chartDom = ref2.value
  var myChart = echarts.init(chartDom);
  chart2 = myChart;
  var option = getOption2([]);
  myChart.setOption(option);
}

const getData = () => {
  axios({
    url: '/api/home/warehouse/name/deliver?apiToken=7286775b9c0f4d478be5e7ebee5653ad',
    method: 'get'
  }).then(({data}) => {
    if(data.status === 200){
      list.value = data.data;
      console.log(data.data)
      draw1(data.data)

      // 默认请求第一个区域
      if(data.data.length > 0 ){
        getData2(data.data[0].area)
      }
    }
  }).catch(e => {
    console.log(e);
  })
}

const getData2 = (area) => {
  axios({
    url: '/api/home/warehouse/name/deliver/info?apiToken=7648ae4db5ad4d87b9020c762dbb2f6e',
    params: {
      area
    },
    method: 'get'
  }).then(({data}) => {
    if(data.status === 200){
      chart2.setOption(getOption2(data.data, area))
    }
  }).catch(e => {
    console.log(e);
  })
}

onMounted(() => {
  draw2()
  getData()
})

onBeforeUnmount(() => {
  chart2 = null
})

</script>

<style lang="less" scoped>
.budget-table {
  background: #111;
  width: 2100px;
  height: 560px;
  font-size: 40px;
  color: #fff;
  display: flex;
  flex-direction: row;
  padding: 0 40px;
  gap: 40px;
  .chart1 {
    width: 1250px;
    height: 500px;
  }
  .chart2 {
    width: 740px;
    height: 500px;
  }
}

</style>
